<template>
<el-select
        clearable
        v-model="BatchID"
        placeholder="周次"
        size="small"
        style="width: 200px; margin-right: 10px"
        @change="getUnsumittListNew"
      >
        <el-option
          v-for="item in optionsbatch"
          :key="item.BatchID"
          :label="`${item.Year}年第${item.Term}学期第${item.Week}周`"
          :value="item.BatchID"
        ><span>
          {{item.Year}}年第{{item.Term}}学期第{{item.Week}}周
        </span>
        <span v-if="item.IsCurrent==1" style="margin-left:3px">
          <em class="state state-1 status-processing"></em>
        </span>
        </el-option>
      </el-select>

		<el-row :gutter="15">
			<el-col :lg="8">
					<scEcharts v-if="showEcharts" height="200px" :option="optionPie"></scEcharts>
			</el-col>
			<el-col :lg="16">
				<scEcharts height="200px" :option="optionBar"></scEcharts>
			</el-col>
		</el-row>
		<el-card shadow="never" style="margin-top:25px">
					<template #header>
						未上传学生信息
					</template>
  <el-input
        v-model="Class"
        maxlength="30"
        style="width: 200px; margin-right: 10px"
        placeholder="班级"
        size="small"
        clearable
        @input="getUnsumittListNew"
      />

		<el-table :data="unsubmitList" stripe style="width: 100%">
			<el-table-column prop="Class" label="班级"/>
			<el-table-column prop="Name" label="姓名" />
			<el-table-column prop="StudentID" label="学号" />
		</el-table>

			<el-pagination
			style="margin-top:10px"
			background 
			:hide-on-single-page="true"
			layout="prev, pager, next"
			:total="total"
			:page-size="pageSize"
			:current-page="currentPage"
			@current-change="changePage"
			/>
	</el-card>
</template>

<script>
	import { reactive, toRefs, onMounted,watch } from "vue";
	import scEcharts from '@/components/scEcharts';
	import Test from "@/api/model/test";
	import Batch from "@/api/model/batch";
	export default {
	components: {
		scEcharts
	},
	props:{
        Grade:String
    },
  setup(props) {
	watch(props,(newProps) => {
		getUnsumittList()
      }
    );

    const state = reactive({
		unsubmitList:[],
		total: 0, // 总条数
      	currentPage: 1, // 当前页
     	pageSize: 10, // 分页大小
		batchTotal: 0, // 总条数
      	batchCurrentPage: 1, // 当前页
      	batchPageSize: 10, // 分页大小
		Class:'',
		BatchID:"",
     	optionsbatch:[],
		showEcharts:true,
		optionPie: {
			title: {
				text: '',
				subtext: '',
			},
			tooltip: {
				trigger: 'item'
			},
			series: [
				{
					name: '',
					type: 'pie',
					radius: ['55%', '70%'],
					center:['50%','60%'],
					itemStyle: {
								borderRadius: 5,
								borderColor: '#fff',
								borderWidth: 1
							},
					data: [
						{value: 300, name: '已上传-正常'},
						{value: 400-300, name: '未上传'},
						{value: 10, name: '已上传-异常'},
						{value: 3, name: '已上传-阳性'},	
					]
				}
			]
		},optionBar: {
			title: {
				text: '',
			},
			tooltip: {
				trigger: 'axis'
			},
			xAxis: {
				type: 'value'
			},
			yAxis: {
				type: 'category',
				data: ['已上传-正常', '未上传', '已上传-异常', '已上传-阳性']
			},
			series: [{
				data: [{
				value: 300,
				itemStyle: {
					color: '#67c23a'
				}
				},{
				value: 400-300,
				itemStyle: {
					color: '#909399'
				}
				},{
				value: 10,
				itemStyle: {
					color: '#e6a23c'
				}
				},{
				value: 3,
				itemStyle: {
					color: '#f56e6a'
				}
				}],
				type: 'bar',
				barWidth: '15px',
			}]
		}
	})

	 const getUnsumittList=()=>{
       const params = {
		BatchID:state.BatchID,
		Class: state.Class,
		Grade: props.Grade,
        Page: state.currentPage,
        Size: state.pageSize,
      };
      Test.APIUnsubmit.http(params).then((res) => {
        state.unsubmitList=res.data;
        state.total = res.totalCount;
      });
    }

	const getBatchList=()=>{
      if(state.optionsbatch.length!=0) return;
       const params = {
        Page: state.batchCurrentPage,
        Size: state.batchPageSize,
      };
      Batch.APIBatchList.http(params).then((res) => {
        
        state.optionsbatch=state.optionsbatch.concat(res.data);
        state.batchTotal = res.totalCount;
         //选中当前周次
        for(let item=0;item<state.optionsbatch.length;item++){
          if(state.optionsbatch[item].IsCurrent==1){
            state.BatchID=state.optionsbatch[item].BatchID;
            getUnsumittList()();
            return
          }
        }
        //可以考虑懒加载优化
        if(state.batchTotal/state.batchPageSize-state.batchCurrentPage>0){
          state.batchCurrentPage=state.batchCurrentPage+1;
          getBatchList();
        }
      });
      
    }

	const getUnsumittListNew=()=>{
      	state.currentPage = 1;
       	getUnsumittList();
    }

	 // 换页
    const changePage = (val) => {
       state.currentPage = val;
       getUnsumittList();
    };


	onMounted(() => {
		getBatchList()
    });

    return {
      ...toRefs(state),
	  getUnsumittListNew,
	  changePage,
	}
  }
}
</script>

<style scoped>

</style>